<template>
    <div class="absence-statistics">
        <el-tabs v-model="activeTab" @tab-click="onTabClick">
            <el-tab-pane label="今日考勤" name="today" />
            <el-tab-pane label="缺勤统计" name="absence" />
            <el-tab-pane label="历史考勤" name="history" />
            <el-tab-pane label="请假管理" name="leave" />
            <el-tab-pane label="离校管理" name="leaveSchool" />
            <el-tab-pane label="考勤时间设置" name="setting" />
        </el-tabs>
        <div class="filter-bar">
            <el-date-picker v-model="dateRange" type="daterange" range-separator="-" start-placeholder="开始日期"
                end-placeholder="结束日期" style="width: 260px; margin-right: 10px;" />
            <el-select v-model="absenceType" placeholder="缺勤类型" style="width: 130px; margin-right: 10px;">
                <el-option label="全部" value="" />
                <el-option label="病假" value="病假" />
                <el-option label="事假" value="事假" />
                <el-option label="旷课" value="旷课" />
            </el-select>
            <el-select v-model="className" placeholder="班级" style="width: 150px; margin-right: 10px;">
                <el-option v-for="item in classOptions" :key="item" :label="item" :value="item" />
            </el-select>
            <el-input v-model="studentName" placeholder="学生姓名" style="width: 130px; margin-right: 10px;" />
            <el-button type="primary" @click="handleQuery">查询</el-button>
            <el-button @click="handleReset" style="margin-left: 8px;">重置</el-button>
        </div>
        <div class="result-info">查询结果：共计 {{ tableData.length }} 条数据</div>
        <el-table :data="tableData" border style="width: 100%; margin-top: 10px;">
            <el-table-column prop="className" label="班级" width="140" />
            <el-table-column prop="studentName" label="姓名" width="120" />
            <el-table-column prop="sickLeave" label="病假次数" width="120" />
            <el-table-column prop="personalLeave" label="事假次数" width="120" />
            <el-table-column prop="truancy" label="旷课次数" width="120" />
        </el-table>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const activeTab = ref('absence')

// 监听路由变化高亮对应tab
watch(
    () => route.path,
    (path) => {
        if (path.includes('/main/attendance/manage')) {
            activeTab.value = 'today'
        } else if (path.includes('/main/attendance/absence')) {
            activeTab.value = 'absence'
        } else if (path.includes('/main/attendance/history')) {
            activeTab.value = 'history'
        } else if (path.includes('/main/attendance/leave')) {
            activeTab.value = 'leave'
        } else if (path.includes('/main/attendance/leaveSchool')) {
            activeTab.value = 'leaveSchool'
        } else if (path.includes('/main/attendance/setting')) {
            activeTab.value = 'setting'
        }
    },
    { immediate: true }
)

// tab点击时跳转到对应路由
function onTabClick(tab: any) {
    if (tab.paneName === 'today') {
        router.push('/main/attendance/manage')
    } else if (tab.paneName === 'absence') {
        router.push('/main/attendance/absence')
    } else if (tab.paneName === 'history') {
        router.push('/main/attendance/history')
    } else if (tab.paneName === 'leave') {
        router.push('/main/attendance/leave')
    } else if (tab.paneName === 'leaveSchool') {
        router.push('/main/attendance/leaveSchool')
    } else if (tab.paneName === 'setting') {
        router.push('/main/attendance/setting')
    }
}

const dateRange = ref(['2022-03-01', '2022-04-01'])
const absenceType = ref('')
const className = ref('')
const studentName = ref('')
const classOptions = [
    '一年级（1）班',
    '一年级（2）班',
    // 可扩展
]
const tableData = ref([
    { className: '一年级（1）班', studentName: '张三', sickLeave: 1, personalLeave: 0, truancy: 0 },
    { className: '一年级（1）班', studentName: '李思思', sickLeave: 0, personalLeave: 0, truancy: 2 },
    { className: '一年级（2）班', studentName: '王伟', sickLeave: 0, personalLeave: 3, truancy: 0 },
    { className: '一年级（2）班', studentName: '李斯', sickLeave: 1, personalLeave: 2, truancy: 0 },
])

function handleQuery() {
    // 查询逻辑
}
function handleReset() {
    dateRange.value = ['2022-03-01', '2022-04-01']
    absenceType.value = ''
    className.value = ''
    studentName.value = ''
}
</script>

<style scoped>
.absence-statistics {
    background: #f7fafd;
    padding: 20px;
}

.filter-bar {
    margin: 20px 0 10px 0;
    display: flex;
    align-items: center;
}

.result-info {
    margin-bottom: 10px;
    color: #409eff;
}
</style>